<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge"/>
    <title>韩顺平教育-家居网购</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
    <base href="<%=request.getContextPath()%>/">
    <link rel="stylesheet" href="static/assets/css/vendor/vendor.min.css"/>
    <link rel="stylesheet" href="static/assets/css/plugins/plugins.min.css"/>
    <link rel="stylesheet" href="static/assets/css/style.min.css"/>
    <script src="static/assets/script/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
        $(function () {
            //用户名
            $("#loginUsername").val('zhaozhiwei');
            //密码
            $("#loginPassword").val('zhaozhiwei');

            //验证码
            $("#captcha").click(function () {
                $(this).attr("src", "sysUser/captcha?time=" + new Date().getTime());
            })

            //摁下回车, 触发会员登录按钮
            $(document).keydown(function(event) {
                if (event.keyCode == 13) {
                    $(":submit:first").click();
                }
            });

            //会员登录-表单选择器+基础过滤选择器
            $(":submit:first").click(function () {
                let regStr = /^\w{6,10}$/;

                let usernameValue = $(":text:first").val();
                if (!regStr.test(usernameValue)) {
                    $(".errorMsgLogin").text("用户名格式不对, 需要6-10个字符(大小写字母,数字,下划线");
                    return false;
                }

                let passwordValue = $(":password:first").val();
                if (!regStr.test(passwordValue)) {
                    $(".errorMsgLogin").text("密码格式不对, 需要6-10个字符(大小写字母,数字,下划线");
                    return false;
                }

                var rememberMe = $("input:checkbox:first")[0];

                let args = {
                    username: usernameValue,
                    password: passwordValue,
                    rememberMe: rememberMe.checked
                };
                $.ajax({
                    url: "sysUser/login",
                    type: "POST",
                    contentType: "application/json",
                    data: JSON.stringify(args),
                    success: function (result) {
                        if (result.code == 200) {
                            // 登录成功
                            window.location.href = "animate"; // 根据ShiroConfig中配置的successUrl
                        } else {
                            // 登录失败
                            $(".errorMsgLogin").text(result.msg || "登录失败").css("color", "red");
                        }
                    },
                    error: function () {
                        $(".errorMsgLogin").text("系统错误，请稍后重试").css("color", "red");
                    }
                });

                return false; // 阻止表单默认提交
            })

            //会员注册
            $("#sub-btn").click(function () {
                let regStr = /^\w{6,10}$/;

                //验证用户名
                let usernameValue = $("#username").val();
                if (!regStr.test(usernameValue)) {
                    $(".msgRegister").text("用户名格式不对, 需要6-10个字符(大小写字母,数字,下划线");
                    return false;
                }

                //验证密码
                let passwordValue = $("#password").val();
                if (!regStr.test(passwordValue)) {
                    $(".msgRegister").text("密码格式不对, 需要6-10个字符(大小写字母,数字,下划线");
                    return false;
                }

                //验证密码
                let rePasswordValue = $("#repwd").val();
                if (rePasswordValue != passwordValue) {
                    $(".msgRegister").text("两次密码不相同");
                    return false;
                }

                //验证邮箱
                var emailValue = $("#email").val();
                let emailReg = /^[\w-]+@([a-zA-Z]+\.)+[a-zA-Z]+$/;
                if (!emailReg.test(emailValue)) {
                    $(".msgRegister").text("电子邮件的格式不正确, 请重新输入");
                    return false;
                }

                //验证邮箱验证码
                let emailCodeValue = $("#emailCode").val();
                if (!emailCodeValue) {
                    $(".msgRegister").text("请输入邮箱验证码");
                    return false;
                }
                if (!verifyEmailCode(emailValue, emailCodeValue)) {
                    return false;
                }

                //验证手机号
                let phoneValue = $("#phone").val();
                let phoneReg = /^1[3-9]\d{9}$/;
                if (!phoneReg.test(phoneValue)) {
                    $(".msgRegister").text("手机号格式不正确，请重新输入");
                    return false;
                }

                // let phoneCodeValue = $("#phoneCode").val();
                // if (!phoneCodeValue) {
                //     $(".msgRegister").text("请输入手机验证码");
                //     return false;
                // }

                //验证验证码
                var captchaValue = $("#captchaText").val();
                if (!captchaValue) {
                    $(".msgRegister").text("请输入验证码");
                    return false;
                }

                let args = {
                    username: usernameValue,
                    password: passwordValue,
                    email: emailValue,
                    mobilePhone: phoneValue,
                    params: {
                        code: captchaValue,
                        // emailCode: emailCodeValue
                        // phoneCode: phoneCodeValue
                    }
                };
                $.ajax({
                    url: "sysUser/register",
                    type: "post",
                    contentType: "application/json",
                    data: JSON.stringify(args),
                    success: function (data) {
                        console.log("data.code===========", data.code);
                        $(".msgRegister").text(data.msg);

                        // 如果注册成功，显示成功消息并在2秒后切换到登录页面
                        if(data.code == 200) {
                            setTimeout(function(){
                                $(".login-register-tab-list a:first").tab('show');
                            }, 2000);
                        }
                    },
                    error: function (data) {
                        alert("加载失败");
                    },
                    dataType: "json"
                })

                return false;
            })

            //发送邮箱验证码
            $("#sendSms").click(function () {
                var email = $("#email").val();
                if (!email) {
                    $(".msgRegister").text("请输入邮箱地址").css("color", "red");
                    return;
                }

                var emailReg = /^[\w-]+@([a-zA-Z]+\.)+[a-zA-Z]+$/;
                if (!emailReg.test(email)) {
                    $(".msgRegister").text("电子邮件的格式不正确, 请重新输入").css("color", "red");
                    return;
                }
                // 禁用按钮，避免重复发送
                var $btn = $(this);
                $btn.prop("disabled", true);
                $btn.text("发送中...");

                // 发送请求
                $.ajax({
                    url: "api/email/code/send",
                    type: "GET",
                    data: {
                        email: email
                    },
                    success: function (result) {
                        if (result.code == 200) {
                            $(".msgRegister").text("验证码已发送，请查收邮箱").css("color", "green");
                            // 成功发送后开始倒计时
                            var countdown = 60;
                            var timer = setInterval(function() {
                                countdown--;
                                $btn.text(countdown + "秒后重新获取");

                                if (countdown <= 0) {
                                    clearInterval(timer);
                                    $btn.prop("disabled", false);
                                    $btn.text("获取电子邮件验证码");
                                }
                            }, 1000);
                        } else {
                            $(".msgRegister").text(result.message || "发送验证码失败").css("color", "red");
                            $btn.prop("disabled", false);
                            $btn.text("获取电子邮件验证码");
                        }
                    },
                    error: function () {
                        $(".msgRegister").text("系统错误，请稍后再试").css("color", "red");
                        $btn.prop("disabled", false);
                        $btn.text("获取电子邮件验证码");
                    }
                });
            })
        })

        //  验证邮箱验证码
        function verifyEmailCode(email, emailCode) {
            $.ajax({
                url: "api/email/code/verify",
                type: "post",
                data: {
                    email,
                    code: emailCode
                },
                success: function (data) {
                    $(".msgRegister").text(data.message);
                    if (data.code == 200) {
                        $(".msgRegister").css("color", "green");
                        return true;
                    } else {
                        $(".msgRegister").css("color", "red");
                        return false;
                    }
                },
                error: function (data) {
                    alert("加载失败");
                },
                dataType: "json"
            })
        }
    </script>
</head>

<body>
<!-- Header Area start  -->
<div class="header section">
    <!-- Header Top Message Start -->
    <!-- Header Top  End -->
    <!-- Header Bottom  Start -->
    <div class="header-bottom d-none d-lg-block">
        <div class="container position-relative">
            <div class="row align-self-center">
                <!-- Header Logo Start -->
                <div class="col-auto align-self-center">
                    <div class="header-logo">
                        <a href="index.html"><img src="static/assets/images/logo/mylogo.png" alt="Site Logo"/></a>
                    </div>
                </div>
                <!-- Header Logo End -->

            </div>
        </div>
    </div>
    <!-- Header Bottom  Start 手机端的header -->
    <div class="header-bottom d-lg-none sticky-nav bg-white">
        <div class="container position-relative">
            <div class="row align-self-center">
                <!-- Header Logo Start -->
                <div class="col-auto align-self-center">
                    <div class="header-logo">
                        <a href="index.html"><img width="280px" src="static/assets/images/logo/mylogo.png"
                                                  alt="Site Logo"/></a>
                    </div>
                </div>
                <!-- Header Logo End -->
            </div>
        </div>
    </div>
    <!-- Main Menu Start -->
    <div style="width: 100%;height: 50px;background-color: black"></div>
    <!-- Main Menu End -->
</div>
<!-- Header Area End  -->
<!-- login area start -->
<div class="login-register-area pt-70px pb-100px">
    <div class="container">
        <div class="row">
            <div class="col-lg-7 col-md-12 ml-auto mr-auto">
                <div class="login-register-wrapper">
                    <div class="login-register-tab-list nav">
                        <a class="active" data-bs-toggle="tab" href="#lg1">
                            <h4>会员登录</h4>
                        </a>
                        <a data-bs-toggle="tab" href="#lg2">
                            <h4>会员注册</h4>
                        </a>
                    </div>
                    <div class="tab-content">
                        <div id="lg1" class="tab-pane active">
                            <div class="login-form-container">
                                <div class="login-register-form">
                                    <form id="loginForm">
                                        <input type="text" id="loginUsername" name="username" placeholder="请输入用户名"/>
                                        <input type="password" id="loginPassword" name="password" placeholder="请输入密码"/>
                                        <div class="errorMsgLogin" style="color: red"></div>
                                        <div class="button-box">
                                            <div class="login-toggle-btn">
                                                <input type="checkbox" name="rememberMe"/>
                                                <a class="flote-none" href="javascript:void(0)">Remember me</a>
                                                <a href="#">Forgot Password?</a>
                                            </div>
                                            <button type="submit"><span>Login</span></button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                        <div id="lg2" class="tab-pane">
                            <div class="login-form-container">
                                <div class="login-register-form">
                                    <form action="#" method="post">
                                        <input type="text" id="username" name="username" placeholder="Username"/>
                                        <input type="password" id="password" name="password" placeholder="输入密码"/>
                                        <input type="password" id="repwd" placeholder="确认密码"/>
                                        <input name="email" id="email" placeholder="电子邮件" type="email"/>
                                        <div style="display: flex; margin-bottom: 15px;">
                                            <input type="text" id="emailCode" name="emailCode"
                                                   placeholder="电子邮件验证码"
                                                   style="width: 60%; margin-right: 10px;"/>
                                            <button type="button" id="sendSms"
                                                    style="width: 40%; height: 45px; background-color: #fb5d5d; color: white; border: none; border-radius: 5px; cursor: pointer;">
                                                获取电子邮件验证码
                                            </button>
                                        </div>
                                        <input type="text" id="phone" name="phone" placeholder="请输入手机号码"
                                               style="width: 100%"/>
                                        <%--<div style="display: flex; margin-bottom: 15px;">--%>
                                        <%--    <input type="text" id="phoneCode" name="phoneCode" placeholder="手机验证码" style="width: 60%; margin-right: 10px;" />--%>
                                        <%--    <button type="button" id="sendPhoneCode" style="width: 40%; height: 45px; background-color: #fb5d5d; color: white; border: none; border-radius: 5px; cursor: pointer;">获取验证码</button>--%>
                                        <%--</div>--%>
                                        <input type="text" id="captchaText" name="captchaText" style="width: 50%"
                                               id="code"
                                               placeholder="验证码"/>　　<img id="captcha" src="sysUser/captcha"
                                                                            alt="验证码">
                                        <div class="msgRegister" style="color: red"></div>
                                        <div class="button-box">
                                            <button type="submit" id="sub-btn"><span>会员注册</span></button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- login area end -->

<!-- Footer Area Start -->
<div class="footer-area">
    <div class="footer-container">
        <div class="footer-top">
            <div class="container">
                <div class="row">
                    <!-- Start single blog -->
                    <!-- End single blog -->
                    <!-- Start single blog -->
                    <div class="col-md-6 col-sm-6 col-lg-3 mb-md-30px mb-lm-30px" data-aos="fade-up"
                         data-aos-delay="400">
                        <div class="single-wedge">
                            <h4 class="footer-herading">信息</h4>
                            <div class="footer-links">
                                <div class="footer-row">
                                    <ul class="align-items-center">
                                        <li class="li"><a class="single-link" href="about.html">关于我们</a></li>
                                        <li class="li"><a class="single-link" href="#">交货信息</a></li>
                                        <li class="li"><a class="single-link" href="privacy-policy.html">隐私与政策</a>
                                        </li>
                                        <li class="li"><a class="single-link" href="#">条款和条件</a></li>
                                        <li class="li"><a class="single-link" href="#">制造</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- End single blog -->
                    <!-- Start single blog -->
                    <div class="col-md-6 col-lg-2 col-sm-6 mb-lm-30px" data-aos="fade-up" data-aos-delay="600">
                        <div class="single-wedge">
                            <h4 class="footer-herading">我的账号</h4>
                            <div class="footer-links">
                                <div class="footer-row">
                                    <ul class="align-items-center">
                                        <li class="li"><a class="single-link" href="my-account.html">我的账号</a>
                                        </li>
                                        <li class="li"><a class="single-link" href="cart.html">我的购物车</a></li>
                                        <li class="li"><a class="single-link" href="login.html">登录</a></li>
                                        <li class="li"><a class="single-link" href="wishlist.html">感兴趣的</a></li>
                                        <li class="li"><a class="single-link" href="checkout.html">结账</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- End single blog -->
                    <!-- Start single blog -->
                    <div class="col-md-6 col-lg-3" data-aos="fade-up" data-aos-delay="800">

                    </div>
                    <!-- End single blog -->
                </div>
            </div>
        </div>
        <div class="footer-bottom">
            <div class="container">
                <div class="row flex-sm-row-reverse">
                    <div class="col-md-6 text-right">
                        <div class="payment-link">
                            <img src="#" alt="">
                        </div>
                    </div>
                    <div class="col-md-6 text-left">
                        <p class="copy-text">Copyright &copy; 2021 韩顺平教育~</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Footer Area End -->
<script src="static/assets/js/vendor/vendor.min.js"></script>
<script src="static/assets/js/plugins/plugins.min.js"></script>
<!-- Main Js -->
<script src="static/assets/js/main.js"></script>
</body>
</html>
